<template>
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
  >
    <el-tab-pane label="商品分类" name="first">
      
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        header-align="center"
        align="center"
        default-expand-all
        table-layout="fixed"
      >
        <el-table-column
          prop="scale"
          header-align="center"
          align="center"
          label="商品分类名称"
          width="180"
        />
        <el-table-column header-align="center" align="center" label="排序">
          <template #default="scope">
            <el-button size="small" @click="shiftUp(scope.$index, scope.row)"
              >上移</el-button
            >
            <el-button size="small" @click="shiftDown(scope.$index, scope.row)"
              >下移</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" header-align="center">
          <template #default="scope">
            <el-button size="small" @click="handleAdd(scope.$index, scope.row)"
              >添加下级</el-button
            >
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- ------------------------------------------------------------添加 -->
      <el-form
        ref="form"
        :model="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        v-if="takeFormAdd.dialogFormAdd == true"
      >
        <p>添加下级</p>
        <el-form-item label="上级分类" prop="region">
          <el-select
            v-model="ruleForm"
            placeholder="tableData zone"
            disabled="true"
          >
            <el-option label="Zone one" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="name">
          <el-input v-model.text="ruleForm" type="text" />
        </el-form-item>
        <el-form-item label="排序" prop="type">
          <el-input v-model.text="ruleForm" type="text" disabled="true" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitAddForm(formRef)"
            >确认添加</el-button
          >
          <el-button @click="takeFormAdd.dialogFormAdd = false">取消</el-button>
        </el-form-item>
      </el-form>

      <!-- ------------------------------------------------------------修改 -->
      <el-form
        ref="form"
        :model="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        v-if="takeFormVisible.dialogFormVisible == true"
      >
        <p>编辑商品</p>
        <el-form-item label="分类层级" prop="region">
          <el-select v-model="ruleForm" placeholder="tableData zone">
            <el-option label="Zone one" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="name">
          <el-input label-width="100px" v-model.text="ruleForm" type="text" />
        </el-form-item>
        <el-form-item label="排序" prop="type">
          <el-input v-model.text="ruleForm" type="text" label-width="100px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)"
            >确认修改</el-button
          >
          <el-button @click="takeFormVisible.dialogFormVisible = false"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
      
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { TabsPaneContext, FormInstance } from "element-plus";
interface User {
  id: Number;
  rank: Number;
  level: Number;
  scale: String;
  hasChildren?: boolean;
  children?: User[];
}
const takeFormVisible = reactive({ dialogFormVisible: false });
const takeFormAdd = reactive({ dialogFormAdd: false });
const ruleForm = reactive([
  {
    region: "",
  },
]);
const tableData: User[] = [
  {
    id: 1,
    scale: "3C电子",
    level: 1,
    rank:1,
    children: [
      {
        id: 31,
        scale: "电子教育",
        level: 2,
        rank: 2,
      },
      {
        id: 32,
        scale: "智能设备",
        level: 2,
        rank: 2,
      },
      {
        id: 33,
        scale: "手机配件",
        level: 2,
        rank: 2,
        children: [
          {
            id: 44,
            scale: "数据线",
            level: 3,
            rank:0
          },
        ],
      },
    ],
  },
  {
    id: 2,
    scale: "食品/生鲜/特产",
    level: 1,
    rank: 0,
  },
  {
    id: 4,
    scale: "厨卫电器/厨具",
    level: 1,
    rank: 0,
  },
  {
    id: 5,
    scale: "个护化妆/纸品清洁",
    level: 1,
    rank: 0,
  },
  {
    id: 6,
    scale: "电脑办公/DIY",
    level: 1,
    rank: 0,
  },
];

const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const shiftUp = (index: number, row: User) => {
  console.log("我点击了上移", index, row);
};
const shiftDown = (index: number, row: User) => {
  console.log("我点击了下移", index, row);
};
const handleAdd = (index: number, row: User) => {
  console.log("我点击了添加", index, row);
  takeFormAdd.dialogFormAdd = true;
};
const handleEdit = (index: number, row: User) => {
  takeFormVisible.dialogFormVisible = true;
  // console.log(row);
};
const handleDelete = (index, row) => {
  console.log("我点击了删除", index, row);
  row.User.splice(index, 1);
};

//
const formRef = ref<FormInstance>();

const numberValidateForm = reactive({
  age: "",
});

const submitForm = (formEl: FormInstance | undefined) => {
  takeFormVisible.dialogFormVisible = false;
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const submitAddForm = (formEl: FormInstance | undefined) => {
  takeFormAdd.dialogFormAdd = false;
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style lang="less">
.el-main {
  background: white;
  padding: 20px;
}
.el-tabs__nav-wrap {
  margin: 20px;
  background: #272727;
  width: 100%;
}

.el-tabs__item.is-active {
  background-color: white;
  color: #6b778c;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;

  font-weight: 600;
}
.el-tab-pane {
  color: #c9c9c9;
}
.el-form {
  width: 500px;
  border: 1px #3f9eff solid;
  margin: 0 auto;
  top: 15%;
  background: #fff;
  position: absolute;
  left: 20%;
  z-index: 1;
  p {
    font-size: 20px;
    color: black;
    text-align: center;
  }
  .el-input {
    width: 330px;
  }
}
</style>